{% extends "professor/base.html" %}

{% block title %}教务管理系统 --消息{% endblock %}

{% block page_content %}
    <!--
    这里的布局大概是这样的：

    未读消息                                 已读消息
    ...                                     ...
    ...                                     ...

    -->
    <div class="row">
        <a href="{{ url_for('pfs.professor_mark_all_messages_as_read') }}">
            <span class="label label-primary">全部标记为已读</span>
        </a>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <h1 align="left">未读消息</h1>
        </div>
        <div class="col-sm-4">
            <h1 align="center">已读消息</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">
            <!-- 在这里列出未读消息 -->
            <ul class="messages">
                {% if new_messages %}
                    {% for message in new_messages %}
                        <li class="message">
                            <div class="message-content">
                                <div class="message-date">{{ moment(message.timestamp).fromNow() }}</div>
                                <div class="message-body">
                                    {{ message.message }}
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                {% else %}
                    您没有未读消息
                {% endif %}
            </ul>
        </div>

        <div class="col-sm-4" style="background-color:lavenderblush;">
            <!-- 在这里列出已读消息 -->
            <ul class="messages">
                {% if old_messages %}
                    {% for message in old_messages %}
                        <li class="message">
                            <div class="message-content">
                                <div class="message-date">{{ moment(message.timestamp).fromNow() }}</div>
                                <div class="message-body">
                                    {{ message.message }}
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                {% else %}
                    您没有消息
                {% endif %}
            </ul>
        </div>
    </div>
{% endblock %}